<template>
  <view class="fu-keyboard">
    <fu-popup
      v-model:show="localVisible"
      position="bottom"
      :safe-area-inset-bottom="false"
    >
      <!-- 标题栏 -->
      <view class="fu-keyboard__header" v-if="showTitle">
        <text class="fu-keyboard__title">{{ title }}</text>
        <text 
          class="fu-keyboard__close"
          @click="onClose"
        >完成</text>
      </view>
      
      <!-- 键盘主体 -->
      <view class="fu-keyboard__body">
        <!-- 数字键 -->
        <view class="fu-keyboard__keys">
          <view 
            v-for="(key, index) in keys"
            :key="index"
            class="fu-keyboard__key"
            :class="{
              'fu-keyboard__key--gray': key === '',
              'fu-keyboard__key--delete': key === 'delete'
            }"
            @click="onKeyClick(key)"
          >
            <template v-if="key === 'delete'">
              <text class="fu-keyboard__delete-icon">×</text>
            </template>
            <template v-else>
              <text>{{ key }}</text>
            </template>
          </view>
        </view>
      </view>
    </fu-popup>
  </view>
</template>

<script>
/**
 * fu-keyboard 键盘组件
 * @description 自定义数字键盘组件
 * @property {Boolean} show - 是否显示键盘
 * @property {String} title - 键盘标题
 * @property {Boolean} showTitle - 是否显示标题栏
 * @property {String} type - 键盘类型，可选值：number/idcard
 * @event {Function} input - 点击按键时触发
 * @event {Function} delete - 点击删除键时触发
 * @event {Function} close - 点击关闭时触发
 */
export default {
  name: 'fu-keyboard',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '安全键盘'
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    type: {
      type: String,
      default: 'number',
      validator: value => ['number', 'idcard'].includes(value)
    }
  },
  emits: ['update:show', 'input', 'delete', 'close'],
  data() {
    return {
      localVisible: false
    }
  },
  computed: {
    keys() {
      const baseKeys = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
      if (this.type === 'number') {
        return [...baseKeys, '.', '0', 'delete']
      }
      return [...baseKeys, 'X', '0', 'delete']
    }
  },
  watch: {
    show: {
      handler(val) {
        this.localVisible = val
      },
      immediate: true
    },
    localVisible(val) {
      this.$emit('update:show', val)
    }
  },
  methods: {
    onKeyClick(key) {
      if (key === 'delete') {
        this.$emit('delete')
      } else {
        if (key === '.') {
          if (this.$parent.value && this.$parent.value.includes('.')) {
            return
          }
          if (!this.$parent.value) {
            return
          }
        }
        this.$emit('input', key)
      }
    },
    onClose() {
      this.localVisible = false
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-keyboard {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 32rpx;
    background-color: #f7f8fa;
  }
  
  &__title {
    font-size: 28rpx;
    color: var(--fu-text-color);
  }
  
  &__close {
    font-size: 28rpx;
    color: var(--fu-primary-color);
    padding: 20rpx 0;
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &__body {
    background-color: #f2f3f5;
    padding: 12rpx;
  }
  
  &__keys {
    display: flex;
    flex-wrap: wrap;
  }
  
  &__key {
    width: calc((100% - 24rpx) / 3);
    height: 100rpx;
    margin: 4rpx;
    background-color: #fff;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48rpx;
    font-weight: 500;
    color: var(--fu-text-color);
    
    &:active {
      background-color: #ebedf0;
    }
    
    &--gray {
      background-color: #f2f3f5;
    }
    
    &--delete {
      font-size: 56rpx;
      color: var(--fu-text-color-secondary);
    }
  }
  
}
</style> 